<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<u-card :border="false" padding="20">
				<view class="header-content">
					<text class="greeting">{{ userInfo.userName }}，上午好！</text>
					<text class="role">角色：{{ userDetail.roleName }}</text>
				</view>
				<view class="header-content">
					<text class="location">所属区域：{{ userDetail.regionName }}</text>
					<button class="logout-button" type="warn" size="mini" plain @click="logout">退出登录</button>
				</view>

			</u-card>
		</view>

		<!-- 工单排名 -->
		<view class="rank">
			<u-card :border="false" padding="20">
				<view class="rank-content">
					<text class="rank-text">工单量排名：第{{ rank || 3 }}名 / 总{{ total || 10 }}人</text>
				</view>
				<text class="utag">今天也要努力呀！</text>
			</u-card>
		</view>

		<!-- 待办工单 -->
		<view class="todo">
			<u-card :border="false" padding="20">
				<view class="todo-content">
					<view>
						<image class="clock-img" src="/static/img/clock.jpg" mode="cover"></image>
						<text class="todo-title">待办工单</text>
					</view>
					<view v-for="task in taskingList" :key="task.taskId" class="task"
						@click="openTaskDetail(task.taskId)">
						<text class="task-id">{{ task.taskCode }}</text>
						<view class="task-location">
							<image class="task-img-location" src="/static/img/location.jpg" mode="cover"></image>
							<text class="task-text-location">{{ task.addr }}</text>
						</view>
						<text class="task-time">{{ task.createTime }}</text>
					</view>
				</view>
			</u-card>
		</view>

		<!-- 底部导航 -->
		<view class="footer">
			<u-tabbar :list="tabbarList" :mid-button="false" />
		</view>
	</view>
</template>

<script>
import {
	getUserDetail,
	getRank,
	searchTasks
} from '@/utils/api'; // 导入api.js中的方法

export default {
	data() {
		return {
			//token信息
			userInfo: {},
			//详细信息
			userDetail: {},
			//待办工单
			taskingList: [],
			total: 8,
			rank: 3,
			// 底部导航栏数据
			tabbarList: [{
				iconPath: "/static/home.png",
				selectedIconPath: "/static/home-active.png",
				text: "首页",
				pagePath: "/pages/index/index"
			},
			{
				iconPath: "/static/list.png",
				selectedIconPath: "/static/list-active.png",
				text: "进行工单",
				pagePath: "/pages/tasking/tasking"
			},
			{
				iconPath: "/static/grid.png",
				selectedIconPath: "/static/grid-active.png",
				text: "全部工单",
				pagePath: "/pages/taskAll/taskAll"
			}
			]
		};
	},
	onLoad() {
		this.loadUserInfo();
		const userId = this.userInfo.userId
		console.log("当前登录用户", userId)

		//获取详情信息
		this.getUserDetail(userId)
		//获取排名
		this.getRankInfo(userId);
		//获取工单列表
		let query = {
			userId: userId,
			status: 1//待办
		}
		this.getTaskList(query);
	},
	methods: {
		loadUserInfo() {
			this.userInfo = uni.getStorageSync('userInfo') || {};
			console.log("页面打开读取数据：", this.userInfo);
		},
		async getUserDetail(userId) {
			try {
				const userDetailInfo = await getUserDetail(userId);
				console.log("userDetailInfo", userDetailInfo)
				this.userDetail = userDetailInfo
			} catch (error) {
				console.error('获取员工信息失败', error);
			}
		},

		openTaskDetail(taskId) {
			console.log("传参是taskId",taskId)
			uni.navigateTo({
				url: `/pages/taskDetail/taskDetail?taskId=${taskId}`
			});
		},

		async getRankInfo(userId) {
			try {
				const rankInfo = await getRank(userId);
				console.log("rankinfo", rankInfo)
				this.rank = rankInfo.rank;
				this.total = rankInfo.total;
			} catch (error) {
				console.error('获取排名信息失败', error);
			}
		},
		async getTaskList(query) {

			try {
				const data = await searchTasks(query)
				this.taskingList = data.currentPageRecords;
			} catch (error) {
				console.error('获取工单信息失败', error);
			}
		},
		// 退出登录
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('userInfo');
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 0px;
	background-color: #f8f8f8;
}

.header {
	width: 390px;
	height: 180px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-image: url('/static/img/backgroud.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 30px;
	box-sizing: border-box;
	border-radius: 8px;
	/* 添加圆角 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* 添加阴影 */
}

.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #f8f8f8;
	margin-top: 30px;
}

.greeting {
	font-size: 20px;
	font-weight: bold;
	margin-right: 8px;
}

.role {
	font-size: 14px;
	color: #ffaa00;
	margin-left: auto;
}

.logout-button {
	color: #0a2576;
	border-color: #0a2576;
	margin-left: auto;
}

.location {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rank {
	height: 80px;
	width: 390px;
	background-image: url('/static/img/rank.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	box-sizing: border-box;
	line-height: 1.5;
	border-radius: 8px;
	/* 添加圆角 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* 添加阴影 */
}

.rank-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px;

}

.rank-text {
	width: 100%;
	font-size: 16px;
	color: #333;
	margin-left: 10px;

}

.utag {
	width: 100%;
	font-size: 16px;
	color: #ce8989;
	margin-left: 20px;
}

.todo {
	padding: 20px;
}

.clock-img {
	width: 40px;
	height: 30px;
	background-image: url(/static/img/clock.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 10px;
}

.todo-title {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 10px;
}

.task {
	margin-top: 10px;
	margin-bottom: 20px;
}

.task-id {
	font-size: 16px;
	margin-bottom: 15px;
}

.task-location {

	margin-bottom: 15px;
}

.task-img-location {
	height: 20px;
	width: 30px;
	margin-right: 10px;
}

.task-text-location {
	font-size: 15px;
	color: #666;
}

.task-time {
	font-size: 12px;
	color: #999;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
</style>